<style>
    .page{background-color: white !important;}
    .user-info {display: flex; flex-direction: row;padding: 5px 20px ;background-color: #f5f5f5; border: 1px solid #eee;}
    .user-info .avatar{width: 150px; text-align: center;}
    .user-info .avatar span {font-size: 16px;font-weight: bold; display: block;text-align: center;}
    .user-info .user-detail {flex: 1; padding: 50px 0}
    .user-info .user-detail span{float: left;width: 32%;color: #999;line-height: 26px;}
    .user-info .user-detail em {color: #666;margin-left: 8px; font-style: normal;}
    .post-info {}
    .post-info .title{font-size: 16px;margin-top: 30px;height: 45px;line-height: 45px;border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;}
    .post-info .title span {padding: 0 15px;height: 44px;border-right: 1px solid #e9e9e9;cursor: pointer;}
    .post-info .post-wrap {margin: 20px 0;}
    .post-info .post-item {padding: 10px 0 10px 20px;border-bottom: 1px solid #e9e9e9;}
    .post-item h2 {font-size: 14px;color: #666;}
    .post-item .info {color: #999;margin-top: 3px; font-size: 12px !important;}
    .post-item .info span{float: right;margin-left: 10px; font-size: 12px}
    .post-item .info em{font-style: normal;}
    .summary{max-height: 150px; overflow: hidden;}
    /* 回复列表 */
    .reply-item{display: flex; border-bottom: 1px solid #e9e9e9;overflow: hidden;padding: 15px 0;vertical-align: top;}
    .reply-item .date {width: 90px;color: #999;padding: 0 15px;line-height: 22px;text-align: right;}
    .reply-item .cont {flex: 1;position: relative;padding: 0 15px; font-size: 14px;line-height: 26px;}
    .reply-item .cont h3 {color: #999;padding-left: 14px; font-size: 14px;}
    .reply-item .cont a{color: #666;}
    .reply-item .cont em{float: left; color: #999; font-style: normal;}
    .reply-item .cont p{float: left;width: 570px;color: #666}
    .btn-selected {border-bottom: 3px solid #0f5489;  font-weight: bold; padding: 11px 15px !important;}
    /*                         分页按钮样式                  */
    .page-wrap{text-align: center}
    .pagination{display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;}
    .pagination li {display: inline-block;}
    .pagination li a {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination li span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #333;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination>li:first-child>a{margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
    .pagination>li:last-child>a{border-top-right-radius: 4px;  border-bottom-right-radius: 4px;}
    @media (max-width: 1000px) {
        .user-info{flex-direction: column;}
        .user-info .avatar{width: 100%; text-align: center;}
        .user-info .avatar img {border-radius: 50%;}
        .user-info .user-detail{display: flex; flex-direction: column; padding: 20px;}
        .user-info .user-detail span{display: block; flex: 1; width: 100%;}
    }
</style>
<div class="forum-space">
    <div class="container">
        <div class="user-wrap">
            <div class="user-info">
                <div class="avatar">
                    <span id="user-name"></span>
                    <img id="avatar" src="" alt="" style="width: 125px;">
                </div>
                <div class="user-detail">
                    <span>帖子:<em id="posts"></em></span>
                    <span>精华:<em id="post-good"></em></span>
                    <span>等级:<em id="dengji"></em></span>
                    <span>注册时间:<em id="s-time"></em></span>
                    <span>上次发帖时间:<em id="e-time"></em></span>
                </div>
            </div>
            <div class="post-info">
                <div class="title">
                    <span id="post" class="js-btn btn-selected">我的主贴</span>
                    <span id="reply" class="js-btn">我的回帖</span>
                </div>
                <div class="post-wrap" id="post-wrap">

                </div>
                <div class="reply-wrap" style="display: none;" id="reply-wrap">

                </div>
                <div class="page-wrap">
                    <ul id="page-btn-post" class="pagination"></ul>
                    <ul id="page-btn-reply" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var userID = GET('user_id');
    /**
     * @param {[uri]} [要获取数据的接口]
     * @return {Promise}
     * */
    var getData = function (uri) {
        return new Promise(function(resolve, reject) {
                $.ajax({
                url: uri,
                type: 'POST',
                    xhrFields:{
                        withCredentials:true
                    },
                data: {
                    replys: 1,
                    forum_id: GET('forum_id')
                },
                success: function (data) {
                    resolve(data)
                },
                error: function (err) {
                    reject(err)
                }
            })
    })
    };

    var getPageData = function (uri,page, type, id) {
        return new Promise(function(resolve, reject) {
                $.ajax({
                url: uri,
                type: 'POST',
                    xhrFields:{
                        withCredentials:true
                    },
                data: {
                    reply: type,
                    user_id: id,
                    page: page
                },
                success: function (data) {
                    resolve(data)
                },
                error: function (err) {
                    reject(err)
                }
            })
    })
    };

    var createDom = function (data, type, page) {
        if (type) {
            var replyHTML = ' ';
            $('#page-btn-reply').html(page);
            data.forEach(function (item, index) {
                replyHTML += `
                              <div class="reply-item">
                                <div class="date">
                                    ${item.create_time}
                                </div>
                                <div class="cont">
                                    <h3>在:<a href="/home?forum_id=${item.forum_id}#forum_article_detail">${item.title}</a></h3>
                                    <div class="summary">
                                        <em>回复:</em>
                                        <p>${item.content}</p>
                                    </div>
                                </div>
                            </div>
                        `;
                $('.reply-wrap').html(replyHTML)
            });
        } else {
            var postHTML = ' ';
            $('#page-btn-post').html(page);
            data.forEach(function (item, index) {
                if (item.moved) {
                    var deleteHTMl = '<a href="javascript:void(0)" id="forum-remove" style="float: right; font-size: 11px; margin-left: 10px" class="weui-btn weui-btn_mini weui-btn_primary weui-btn_warn">删除</a>';
                } else {
                    deleteHTMl = '';
                }
                postHTML += `
                        <div class="post-item">
                        <a href="/home?forum_id=${item.forum_id}#forum_article_detail"><h2>${item.title}</h2></a>
                        <div class="info">
                            ${item.create_time}
                            ${deleteHTMl}
                            <span class="hidden">${item.forum_id}</span>
                            <span>回复: <em>${item.reply_amount}</em></span>
                            <span>点击: <em>${item.browse}</em></span>
                        </div>
                    </div>
                    `;
                $('.post-wrap').html(postHTML);
            })
        }
    };
    (function (w, u) {
        var post = $('#post-wrap');
        var reply = $('#reply-wrap');
        // 用户信息
        $.ajax({
            url: '/forum/getUserInfo',
            type: 'POST',
            xhrFields:{
                withCredentials:true
            },
            data: {
                user_id: userID
            },
            success: function (data) {
                var datas = data.data.info;
                $('#user-name').text(datas.user_name);
                $('#avatar').attr('src', datas.headimgurl);
                $('#posts').text(datas.amount + '篇');
                $('#post-good').text(datas.highlight + '篇');
                $('#dengji').text(datas.empirical_value);
                $('#s-time').text(datas.create_time);
                $('#e-time').text(datas.last_time);
                if (datas.other) {
                    $('#post').text('他的帖子');
                    $('#reply').text('他的回帖');
                }
            }
        });
        // reply =1  发的帖子
        $.ajax({
            url: '/forum/getlistbyuserd',
            type: 'POST',
            xhrFields:{
                withCredentials:true
            },
            data: {
                user_id: userID,
            },
            success: function (data) {
                $('#page-btn-post').html(data.page);
                data = data.data.list;
                data.forEach(function (item, index) {
                    if (item.moved) {
                        var deleteHTML = '<a href="javascript:void(0)" id="forum-remove" style="float: right; font-size: 11px; margin-left: 10px" class="weui-btn weui-btn_mini weui-btn_primary weui-btn_warn">删除</a>';
                    } else {
                        deleteHTML = ' ';
                    }
                    $('.post-wrap').append(`
                        <div class="post-item">
                        <a href="/home?forum_id=${item.forum_id}#forum_article_detail"><h2>${item.title}</h2></a>
                        <div class="info">
                            ${item.create_time}
                            ${deleteHTML}
                            <span class="hidden">${item.forum_id}</span>
                            <span>回复: <em>${item.reply_amount}</em></span>
                            <span>点击: <em>${item.browse}</em></span>
                        </div>
                    </div>
                    `)
                })
            }
        });
        $('#page-btn-reply').hide();
        // 回复列表
        $.ajax({
            url: '/forum/getlistbyuserd',
            type: 'POST',
            xhrFields:{
                withCredentials:true
            },
            data: {
                user_id: userID,
                reply: 1
            },
            success: function (data) {
//                pageBTN(data.page, 'page-btn-reply');
                $('#page-btn-reply').html(data.page);
                data = data.data.list;
                data.forEach(function (item, index) {
                    reply.append(`
                            <div class="reply-item">
                                <div class="date">
                                    ${item.create_time}
                                </div>
                                <div class="cont">
                                    <h3>在:<a href="/home?forum_id=${item.forum_id}#forum_article_detail">${item.title}</a></h3>
                                    <div class="summary">
                                        <em>回复:</em>
                                        <p>${item.content}</p>
                                    </div>
                                </div>
                            </div>
                        `)
                })
            }
        });
        $('body').on('click', '#reply', function () {
            post.hide();
            reply.show();
            $('#page-btn-reply').show();
            $('.js-btn').removeClass('btn-selected');
            $(this).addClass('btn-selected');
            $('#page-btn-post').hide();
        });


        $('body').on('click', '#post', function () {
            reply.hide();
            post.show();
            $('#page-btn-reply').hide();
            $('#page-btn-post').show();
            $('.js-btn').removeClass('btn-selected');
            $(this).addClass('btn-selected');
        });

    })(window, undefined);
    //删除帖子
    $('body').on('click','#forum-remove',function () {
        var forum_id = $(this).next().text();
        var delet = confirm('是否删除该帖子?');
        if(delet){
            $.ajax({
                url: '/forum/remove',
                type: 'POST',
                xhrFields:{
                    withCredentials:true
                },
                data: {
                    forum_id: forum_id,
                },
                success: function (data) {
                    window.location.reload();
                }
            })
        }
    });

    // 分页按钮
    function ajax_page(num, type) {
        TOAST.load('加载中', ' ', 10);
        var num = num;
        if (type === 1) {
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
            getPageData('/forum/getlistbyuserd', num, type, userID).then(function(data) {
                var datas = data.data.list;
            var page = data.page;
            console.log(data);
            TOAST.stop();
            createDom(datas, type, page);
        });
        } else {
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
            getPageData('/forum/getlistbyuserd', num, type, userID).then(function(data) {
                var datas = data.data.list;
            var page = data.page;
            console.log(data);
            TOAST.stop();
            createDom(datas, type, page);
        });
        }
    }
</script>